<template>
	<view>
		<view v-if="showInputPwd">
			<view class="pwd-bg"  @click="close" ></view>
			<view class="pay-password" >
				<view class="pwd-box" :class="{'pb':showInputPwd && !hideInputPwd,'hb':hideInputPwd}">
					<view class="pwd-title">
						<text class="pwd-title-left">{{i18n.verification}}</text>
						<view class="pwd-title-right iconfont" @click="close">&#xe609;</view>
					</view>
                    <view class="pass-tips">{{i18n.fundPass}}</view>
					<view class="input-fa" :class="{'active':focus1}">
						<input password v-model="paypass" @focus="focus1 = true" @blur="focus1 = false" :placeholder="i18n.enterPass" class="input">
					</view>
					<view class="btn-an" style="margin-top: 30upx;">
						<button class="btn-block" hover-class="btn-hover" type="primary" @click="refer">{{i18n.confirm}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hideInputPwd:false,
				showInputPwd: false,
				paypass:'',
				focus1: false,
			};
		},
		computed: {
		    i18n() {
		    	return this.$t('components');
		    }
		},
		methods: {
			close(){
				this.hideInputPwd = true
				setTimeout(()=> {
					this.showInputPwd = false
					this.hideInputPwd = false
				}, 400)
				this.paypass = ''
			},
			setDisplay(flag) {
				if (flag) {
					this.paypass = ''
				}
				this.showInputPwd = flag
			},
			refer(){
				if(!this.paypass){
					return this.$toast(this.$t('components.enterPass'));
				}
				this.$emit('complete', this.paypass)
			}
		}
	}
</script>

<style lang="less" scoped>
	@fontsize: 28upx;

	.pwd-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		z-index: 980
	}
	.pwd-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		z-index: 990;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
		padding-bottom: 30upx;
	}


	.pwd-title {
		display: flex;
		justify-content: space-between;
		height: 100upx;
		align-items: center;
		margin-bottom: 30upx;
		padding: 0 30upx;
	}

	.pwd-title-right,
	.pwd-title-left {
		font-size: 36upx;
		line-height: 100upx;
		height: 100upx;
	}
    .pass-tips{
		padding: 0 30upx;
		font-size: 30upx;
	}
	.input-fa{
		margin: 0 30upx;
		height: 100upx;
		border-bottom: 1upx solid var(--border);
		display: flex;
		align-items: center;
		.input{
			flex: 1;
			font-size: 30upx;
		}
	}
	.active{
		border-color: var(--theme-color);
	}
	
	.pb {
		animation: showbottom 0.4s;
	}
	.hb {
		animation: hidebottom 0.4s;
	}
    @keyframes showbottom {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}
	@keyframes hidebottom {
		from {
			transform: translateY(0);
		}
	
		to {
			transform: translateY(100%);
		}
	}
</style>
